import Vue from 'vue';
import {
  SIDEBAR_TYPE,
  TOGGLE_MOBILE_TYPE,
  TOGGLE_NAV_THEME,
  TOGGLE_LAYOUT,
  TOGGLE_FIXED_HEADER,
  TOGGLE_FIXED_SIDEBAR,
  TOGGLE_CONTENT_WIDTH,
  TOGGLE_HIDE_HEADER,
  TOGGLE_COLOR,
  TOGGLE_WEAK,
  TOGGLE_MULTI_TAB,
  // i18n
  APP_LANGUAGE,
  TOGGLE_SHOW_FOOTER,
  MIX_TOP_MENU_KEY,
  TOGGLE_THEME_CONFIG
} from '@/store/mutation-types';
import { loadLanguageAsync } from '@/locales';

const app = {
  namespaced: true,
  state: {
    sideCollapsed: false,
    isMobile: false,
    theme: 'dark',
    themeConfig: {},
    layout: '',
    contentWidth: '',
    fixedHeader: false,
    fixedSidebar: false,
    showFooter: false,
    autoHideHeader: false,
    color: '',
    weak: false,
    multiTab: true,
    lang: 'en-US',
    _antLocale: {},

    reloadPage: true,
    // mix 模式下，顶部菜单选择key
    mixTopMenuKey: '',
    // 是否显示面包屑
    showBreadCrumb: true,
    // 菜单伸缩图标位置
    menuTrigger: 'headTop'
  },
  mutations: {
    [SIDEBAR_TYPE]: (state, type) => {
      state.sideCollapsed = type;
      Vue.ls.set(SIDEBAR_TYPE, type);
    },

    [TOGGLE_MOBILE_TYPE]: (state, isMobile) => {
      state.isMobile = isMobile;
    },

    // 主题信息
    [TOGGLE_NAV_THEME]: (state, theme) => {
      state.theme = theme;
      Vue.ls.set(TOGGLE_NAV_THEME, theme);
    },

    // 主题配置信息
    [TOGGLE_THEME_CONFIG]: (state, config) => {
      state.themeConfig = config;
      Vue.ls.set(TOGGLE_THEME_CONFIG, config);
    },

    [TOGGLE_LAYOUT]: (state, mode) => {
      state.layout = mode;
      Vue.ls.set(TOGGLE_LAYOUT, mode);
    },
    [TOGGLE_FIXED_HEADER]: (state, mode) => {
      state.fixedHeader = mode;
      Vue.ls.set(TOGGLE_FIXED_HEADER, mode);
    },
    [TOGGLE_FIXED_SIDEBAR]: (state, mode) => {
      state.fixedSidebar = mode;
      Vue.ls.set(TOGGLE_FIXED_SIDEBAR, mode);
    },
    [TOGGLE_CONTENT_WIDTH]: (state, type) => {
      state.contentWidth = type;
      Vue.ls.set(TOGGLE_CONTENT_WIDTH, type);
    },
    [TOGGLE_HIDE_HEADER]: (state, type) => {
      state.autoHideHeader = type;
      Vue.ls.set(TOGGLE_HIDE_HEADER, type);
    },
    [TOGGLE_COLOR]: (state, color) => {
      state.color = color;
      Vue.ls.set(TOGGLE_COLOR, color);
    },
    [TOGGLE_WEAK]: (state, mode) => {
      state.weak = mode;
      Vue.ls.set(TOGGLE_WEAK, mode);
    },
    [APP_LANGUAGE]: (state, lang, antd = {}) => {
      state.lang = lang;
      state._antLocale = antd;
      Vue.ls.set(APP_LANGUAGE, lang);
    },
    [TOGGLE_MULTI_TAB]: (state, bool) => {
      Vue.ls.set(TOGGLE_MULTI_TAB, bool);
      state.multiTab = bool;
    },

    [TOGGLE_SHOW_FOOTER]: (state, bool) => {
      Vue.ls.set(TOGGLE_SHOW_FOOTER, bool);
      state.showFooter = bool;
    },

    RELOAD_PAGE: (state, bool) => {
      state.reloadPage = bool;
    },

    [MIX_TOP_MENU_KEY]: (state, key) => {
      state.mixTopMenuKey = key;
    },

    // 显示面包屑
    SHOW_BREAD_CRUMB: (state, bool) => {
      state.showBreadCrumb = bool;
      Vue.ls.set('SHOW_BREAD_CRUMB', bool);
    },

    MENU_TRIGGER_MODE: (state, mode) => {
      state.menuTrigger = mode;
      Vue.ls.set('MENU_TRIGGER_MODE', mode);
    }
  },
  actions: {
    /**
     * 设置国际化语言
     * 
     * @param {*} param0 
     * @param {*} lang 
     * @returns 
     */
    setLang({ commit }, lang) {
      return new Promise((resolve, reject) => {
        commit(APP_LANGUAGE, lang);
        loadLanguageAsync(lang).then(() => {
          resolve();
        }).catch((e) => {
          reject(e);
        });
      });
    },

    /**
     * @description: 切换主题色
     * @param {*} commit
     * @param {*} color
     * @return {*}
     */
    ToggleColor({ commit }, color) {
      commit(TOGGLE_COLOR, color);
    },

    /**
     * @description: 切换主题
     * @param {*} commit
     * @param {*} theme
     * @return {*}
     */
    ToggleTheme({ commit }, theme) {
      commit(TOGGLE_NAV_THEME, theme);
    },

    ToggleMultiTab({ commit }, multiTab) {
      commit(TOGGLE_MULTI_TAB, multiTab);
    },

    ToggleLayoutMode({ commit }, mode) {
      commit(TOGGLE_LAYOUT, mode);
    },

    ToggleFixedHeader({ commit }, fixedHeader) {
      if (!fixedHeader) {
        commit(TOGGLE_FIXED_HEADER, false);
      }

      commit(TOGGLE_FIXED_HEADER, fixedHeader);
    },

    ToggleFixedSidebar({ commit }, fixSiderbar) {
      commit(TOGGLE_FIXED_SIDEBAR, fixSiderbar);
    },

    ToggleContentWidth({ commit }, type) {
      commit(TOGGLE_CONTENT_WIDTH, type);
    }
  }
};

export default app;
